<template>
  <!-- ActivityDetails 活动详情 -->
  <PageContainer>
    <Loading v-model="loading">
      <view class="container">
        <ActivityDetailMain
          @pageScrollTo="pageScrollTo"
          type="preview"
          :activity-list-res-data="data"
          :richTextData="richTextData"
          :organizingUnitList="organizingUnitList"
        ></ActivityDetailMain>
        <PerfectInfoDialog />
        <!-- 专员弹窗 -->
        <UniPopup ref="attachPopup">
          <view class="attach-info">
            <text class="title">活动咨询</text>
            <text class="desc">可通过以下电话咨询</text>
            <view class="attach-info_item_box">
              <template v-for="v in data?.attacheVoList" :key="v.id">
                <view class="attach-info_item">
                  <text class="attach-info_label">{{ v.userName }}</text>
                  <text class="attach-info_phone" @click="callPhone(v.phonenumber)">
                    {{ v.phonenumber }}
                  </text>
                </view>
              </template>
            </view>
            <view class="btn" @click="closePopup('attachPopup')">关闭</view>
          </view>
        </UniPopup>
        <view v-if="data?.attacheVoList?.length" class="bot-btns card-shadow" id="footer-opration">
          <view class="left">
            <view class="left-btn" @click="openPopup('attachPopup')">
              <text class="ali-icon icon-dianhuatianchong icon-style" />
              <text class="text">咨询</text>
            </view>
          </view>
        </view>
      </view>
    </Loading>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  activityDetailsPreview  活动详情(预览) */
  import PageContainer from '@/components/PageContainer/index.vue';
  import { navigateBack, onLoad } from '@/router';
  import { getCurrentInstance, ref } from 'vue';
  import {
    activityDetailsPreview,
    getActivityDetailListPreview,
    getActivityPartnersPreview,
  } from '@/api/activity';
  import type { IActivityListResData, IOrganizingUnit } from '@/api/activity/types';
  import Loading from '@/components/Loading/index.vue';
  import { onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';

  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import PerfectInfoDialog from '@/components/PerfectInfoDialog/index.vue';

  import ActivityDetailMain from '../components/ActivityDetailMain.vue';
  import type { IRichTextData } from '../types';
  import { Toast } from '@/utils';

  const loading = ref(true);
  /** 活动id */
  const id = ref<number>(0);

  /** 详情数据 */
  const data = ref<IActivityListResData>();

  onLoad<'ActivityDetailsPreview'>((op) => {
    id.value = op.scene ? op.scene : op.id;
    __init();
  });

  /** 获取活动详情数据 */
  function getData() {
    return activityDetailsPreview(id.value)
      .then((r) => {
        data.value = r;
      })
      .catch(() => {
        setTimeout(() => {
          navigateBack();
        }, 2000);
      });
  }

  async function __init() {
    loading.value = true;
    await getData();
    Promise.all([queryActivityPartners(), queryActivityDetailList()]).finally(() => {
      uni.stopPullDownRefresh();
      loading.value = false;
    });
  }

  onPullDownRefresh(() => {
    __init();
  });

  /**举办单位数据 */

  const organizingUnitList = ref<IOrganizingUnit[]>([]);
  const queryActivityPartners = async () => {
    organizingUnitList.value = await getActivityPartnersPreview(data.value!.id);
  };

  /**富文本列表 */
  const richTextData = ref<IRichTextData[]>([]);
  const queryActivityDetailList = async () => {
    const res = await getActivityDetailListPreview(data.value!.id);
    richTextData.value = res.map((item) => {
      return {
        title: item.moduleName,
        id: 'id' + item.id,
        top: 0,
        height: 0,
        content: item.introduce,
        isShow: true,
      };
    });
  };

  onPageScroll(() => {});
  const pageScrollTo = (id: string, fn: Function) => {
    uni.pageScrollTo({
      selector: id,
      duration: 300,
      success: () => {
        fn();
      },
    });
  };
  const _this = getCurrentInstance();
  const openPopup = (ref: string, direction: string = 'center') => {
    (_this?.refs[ref] as any).open(direction);
  };
  const closePopup = (ref: string, direction: string = 'center') => {
    (_this?.refs[ref] as any).close(direction);
  };
  /** 拨打专员电话 */
  function callPhone(phoneNumber: string) {
    uni.makePhoneCall({ phoneNumber, fail: (err) => console.log(err) });
  }
</script>
<style lang="scss" scoped>
  .bot-btns {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    .left {
      display: flex;
      justify-content: center;
      width: 100%;
      .left-btn {
        width: 100rpx;
        height: 100rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8rpx;
        color: #999996;
        .icon-style {
          font-size: 40rpx;
        }
        .text {
          font-size: 24rpx;
          line-height: 32rpx;
        }
      }
    }

    .right {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 32rpx;
    }
  }

  .info-handle-btn {
    display: flex;
    align-items: center;
    flex: 1;
    position: relative;
    height: 40rpx;
    > view {
      // width: 33.33%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: #333;
      font-weight: 400;
      position: relative;
      margin-left: 30rpx;
      &:nth-child(2) {
        // border-left: none;
        &::after {
          content: '';
          position: absolute;
          left: -15rpx;
          top: 0;
          width: 4rpx;
          height: 100%;
          background-color: #ddd;
        }
      }
      > button {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9;
        opacity: 0;
      }
      > .ali-icon {
        font-size: 48rpx;
        color: #ef823a;
        margin-right: 15rpx;
      }
      > image {
        width: 48rpx;
        height: 48rpx;
        margin-right: 15rpx;
      }
    }
  }

  .info-handle-btn {
    margin-top: 30rpx;
    justify-content: flex-end;
    > view {
      width: auto;
    }
  }

  .attach-info {
    box-sizing: border-box;
    width: 622rpx;
    border-radius: 32rpx;
    background-color: #fff;
    padding: 48rpx 48rpx 32rpx 48rpx;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    .title {
      color: #333;
      text-align: center;
      font-size: 32rpx;
      font-weight: 400;
      line-height: 48rpx;
      font-weight: bold;
    }
    .desc {
      color: #333;
      text-align: center;
      font-size: 28rpx;
      font-weight: 400;
      line-height: 40rpx;
      margin: 24rpx 0 32rpx 0;
    }
    .attach-info_item_box {
      width: 100%;
      max-height: 400rpx;
      overflow-y: scroll;

      .attach-info_item {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 32rpx;
        color: #333;
        padding: 24rpx 20rpx;
        background-color: #f7f8fa;
        margin-top: 20rpx;
        border-radius: 16rpx;
        font-weight: bold;
      }
      .attach-info_phone {
        color: #4a75ff;
      }
    }

    .btn {
      margin-top: 32rpx;
      box-sizing: border-box;
      display: flex;
      width: 100%;
      height: 72rpx;
      padding: 8px 0px;
      justify-content: center;
      align-items: center;
      border-radius: 32rpx;
      background: #2878ff;
      color: #fff;
      font-size: 28rpx;
    }
  }
</style>
